<template>
    <div style="flex: 1;background-color: #ffffff">
        <div style="height: 50px;width: 750px;background-color: #00c470;"></div>
        <div class="bar-middle">
            <div @click="change(0)" :class="['bar-middle-btn','first-btn', _activeTab == 0 ?'active':'']">
                <text :class="[_activeTab == 0 ?'active-text':'']">人员</text>
            </div>
            <div @click="change(1)" :class="['bar-middle-btn','second-btn', _activeTab == 1 ?'active':'']">
                <text :class="[_activeTab == 1 ?'active-text':'']">部门</text>
            </div>
            <div @click="change(2)" :class="['bar-middle-btn','third-btn', _activeTab == 2 ?'active':'']">
                <text :class="[_activeTab == 2 ?'active-text':'']">职位</text>
            </div>
        </div>


        <host style="flex: 1" @change="onchange" :index="activeTab">
            <!--<child style="background-color: red;display: flex">-->
            <div class="tab" @load="load" @show="show">
                <wxc-searchbar ref="wxc-searchbar" v-if="_activeTab == 0"
                               @wxcSearchbarCancelClicked="wxcSearchbarCancelClicked"
                               @wxcSearchbarInputOnInput="wxcSearchbarInputOnInput"></wxc-searchbar>
                <wxc-indexlist :normal-list="sourceData"
                               @wxcIndexlistItemClicked="wxcIndexlistItemClicked"
                               :show-index="showIndex" v-if="_activeTab == 0"></wxc-indexlist>
            </div>

            <div class="tab">
                <wxc-indexlist :normal-list="sectionData"
                               @wxcIndexlistItemClicked="wxcIndexlistItemClicked"
                               :show-index="showIndex" v-if="_activeTab == 1"></wxc-indexlist>
            </div>
            <div class="tab">
                <wxc-indexlist :normal-list="positonData"
                               @wxcIndexlistItemClicked="wxcIndexlistItemClicked"
                               :show-index="showIndex" v-if="_activeTab == 2"></wxc-indexlist>
            </div>
        </host>


        <!--<prerender src="home.js"></prerender>-->

        <!--<prerender src="app/busi/tab/serial.js"></prerender>-->
        <!--<a href="demo/pagedemo.js" style="width: 100;height: 100;background-color: red;justify-content: center;align-items: center"><text>跳转</text></a>-->
    </div>

</template>

<style>

    .tab {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }

    .bar-middle {
        align-items: center;
        justify-content: center;
        height: 100px;
        width: 750px;
        background-color: #00c470;
        flex-direction: row;

        display: none;
    }

    .bar-middle-btn {
        width: 120px;
        height: 70px;
        background-color: white;
        align-items: center;
        justify-content: center;
    }

    .first-btn {
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }

    .second-btn {
    }

    .third-btn {
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    .active {
        background-color: #00d475;
    }

    .active-text {
        color: white;
    }

</style>

<script>

    const modal = weex.requireModule('modal');
    import {WxcIndexlist, WxcSearchbar} from 'weex-ui';
    import bottomMen from '../components/bottomMen.vue'
    import headBar from '../components/headBar.vue'
    import nw from '../network/nw.js'


    import pinyin from 'js-pinyin'

    export default {
        components: {WxcIndexlist, WxcSearchbar},
        data() {
            return {
                logoUrl: 'http://img1.vued.vanthink.cn/vued08aa73a9ab65dcbd360ec54659ada97c.png',
                target: 'World',
                showIndex: true,
                value: '',
                activeTab: 0,//默认活跃的切换栏
                sourceData: [],//通讯录源数据
                sectionData: [],//部门数据
                positonData: [],//职位数据
                tempData: []//临时数据
            }
        },

        computed: {
            _activeTab() {
                return this.activeTab
            }
        },
        methods: {
            onchange(p) {
                this.toast(p.activeTab)
            },
            update: function (e) {
                this.target = 'Weex'
                console.log('target:', this.target)
            },
            change(i) {
                this.activeTab = i;

            },
            show() {

            },
            //切换栏目
            switchTab(index) {
                this.activeTab = index
            },
            wxcIndexlistItemClicked(e) {
                console.log(e)
            },
            wxcSearchbarInputOnInput(e) {

                this.value = e.value

                var data = this.tempData
                var arr = new Array()
                for (let i in data) {
                    var ele = data[i]
                    if (ele.name.indexOf(e.value) != -1) {
                        arr.push(ele)
                    }
                }

                this.activeTab = 1
                this.activeTab = 0

                Vue.set(this, 'sourceData', arr)

            },
            wxcSearchbarCancelClicked() {
                Vue.set(this, 'sourceData', this.tempData)
                this.value = ''

            }
        },

        created: function () {


        },

        beforeCreate() {
            var self = this
            nw.postDefine('/app/system/addressBook/list', {
                data: {},
                success(res) {
                    var orgData = {}
                    orgData.normalList = new Array()

                    var existSection = {}//部门去重
                    var existPosition = {}//职位去重

                    for (let i in res) {
                        let eleData = {
                            name: res[i].userName,
                            pinYin: pinyin.getFullChars(res[i].userName),
                            py: pinyin.getCamelChars(res[i].userName),
                            groupName: res[i].sectionName,
                            groupId: res[i].groupNameId,
                            userId: res[i].userId,
                            stateCd: res[i].stateCd,
                            roleName: res[i].roleName,
                            roleId: res[i].roleId,
                            position: res[i].position
                        }
                        self.sourceData.push(eleData)

                        if (res[i].sectionName && !existSection[res[i].sectionName]) {
                            var sele = {
                                groupId: res[i].groupNameId,
                                name: res[i].sectionName,
                                pinYin: pinyin.getFullChars(res[i].sectionName),
                                py: pinyin.getCamelChars(res[i].sectionName)
                            }

                            self.sectionData.push(sele)
                            existSection[res[i].sectionName] = true
                        }


                        if (res[i].position && !existPosition[res[i].position]) {
                            var pele = {
                                name: res[i].position,
                                py: pinyin.getCamelChars(res[i].position),
                                pinYin: pinyin.getFullChars(res[i].position)
                            }

                            self.positonData.push(pele)
                            existPosition[res[i].position] = true
                        }


                    }

                    self.tempData = self.sourceData

                }
            })
        },
    }
</script>